<template>
  <div class="login-wrapper">
    <BaseDialog v-model="dialogVisible" :title="dialogTitle" @before-close="goBack">
      <div class="login">
        <div class="login-header">
          <img :src="logoUlr" class="login-logo" />
          <div class="login-header-title">
            <p>天天进销存管理</p>
            <p>丰富 · 实时 · 高效 · 智能</p>
          </div>
        </div>
        <div class="login-body">
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            status-icon
            :rules="rules"
            label-width="120px"
          >
            <el-form-item prop="userName" style="margin-bottom: 24px">
              <el-input
                v-model="ruleForm.userName"
                placeholder="请输入注册手机号/用户名"
                clearable
                autocomplete="off"
              >
                <template #prefix>
                  <img :src="usernameIcon" class="username-icon" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="pass" style="margin-bottom: 26px">
              <el-input
                v-model="ruleForm.pass"
                placeholder="请输入密码"
                clearable
                type="password"
                autocomplete="off"
              >
                <template #prefix>
                  <img :src="passwordIcon" class="password-icon" />
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <template #footer>
        <el-button type="primary" @click="submitForm(ruleFormRef)"> 登 录 </el-button>
        <el-button @click="dialogVisible = false"> 返 回 </el-button>
      </template>
    </BaseDialog>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import BaseDialog from '@/components/BaseDialog.vue'
// 引入本地图片方法
import { imgLocalUrl } from '@/utils/imgLocalUrl'
// 引入store
// import { useLoginStore } from '@/render/store/modules/login'
import { useCache } from '@/hooks/useCache'
const { wsCache } = useCache('localStorage')
// 引入icon
const logoUlr = imgLocalUrl('@/assets/login/logo.png')
const usernameIcon = imgLocalUrl('@/assets/login/username.png')
const passwordIcon = imgLocalUrl('@/assets/login/password.png')

// 使用store
// const loginStore = useLoginStore()
// 引入store登陆设置
/*const autoLogin = computed(() => {
  return loginStore.loginSetting.autoLogin
})
const rememberPassword = computed(() => {
  return loginStore.loginSetting.rememberPassword
})
// 设置记住密码、自动登录等
const handleSetLogin = (e) => {
  loginStore.setLoginSetting(e)
} */

const router = useRouter()
const ruleFormRef = ref()
const ruleForm = reactive({
  userName: '',
  pass: ''
})
// 表单校验
const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
}
const validateUserName = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入注册手机号/用户名'))
  } else if (value.length > 15) {
    callback(new Error('超出最大15个字符长度'))
  } else {
    callback()
  }
}
const rules = reactive({
  userName: [{ validator: validateUserName, trigger: 'blur' }],
  pass: [{ validator: validatePass, trigger: 'blur' }]
})

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
      handleToLogin()
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const handleToLogin = () => {
  wsCache.set('login', true, { exp: 100 })
  // 进入下一页 TODO
  router.push({ path: '/manage/1' })
  // window.electronAPI.setLogin('登陆成功')
}

const dialogVisible = ref(true)
const dialogTitle = ref('设置登录页面')
// 关闭窗口后，要返回上一页
const goBack = (done) => {
  if (confirm('返回上一页')) {
    done()
    router.back()
  } else {
    done(false)
  }
}
</script>
<style lang="scss" scoped>
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep(.el-overlay-dialog) {
  display: flex;
  justify-content: center;
  align-items: center;
  .el-dialog {
    margin: 0 !important;
    &__header {
      height: 54px;
      padding: 0;
      margin-right: 0 !important;
      border-bottom: 1px solid var(--el-border-color);
    }
    &__body {
      padding: 15px !important;
    }
    &__footer {
      border-top: 1px solid var(--el-border-color);
    }
    &__headerbtn {
      top: 0;
    }
  }
}
.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  &-header {
    display: flex;
    img {
      display: block;
      margin-right: 16px;
      width: 64px;
      height: 64px;
    }
    &-title {
      p:nth-child(1) {
        font-size: 30px;
        font-family:
          PingFang SC-Semibold,
          PingFang SC;
        font-weight: 600;
        color: var(--el-color-danger);
        margin-bottom: 3px;
      }
      p:nth-child(2) {
        font-size: 15px;
        font-family:
          PingFang SC-Semibold,
          PingFang SC;
        font-weight: 600;
        color: var(--el-color-primary);
      }
    }
  }
  &-body {
    display: flex;
    margin-top: 54px;
  }
  :deep(.el-form-item__content) {
    margin-left: 0 !important;
  }
  :deep(.el-input) {
    width: 28rem;
    height: 3.5rem;
  }
}
img.password-icon,
img.username-icon {
  width: 2rem;
  height: 2rem;
  display: inline-block;
}
</style>
